<template>
	<view class="con-box">
		<view class="overtime" v-if="num == 1">
			<view class="logo">
				<!-- <image src="../../static/detail/shopfail.png" mode=""></image> -->
			</view>
			<view class="title">订单已超时</view>
			<view class="text">订单未在规定时间内支付，已自动取消</view>
			<view class="bottom_btn" @tap="backHome">返回首页</view>
		</view>
		<view class="loading" v-if="num == 2">
			<view class="logo">
				<image src="../../static/detail/loading.png" mode=""></image>
			</view>
			<view class="title">正在加载支付结果，请稍等...</view>
			<view class="bottom_btn" @tap="payOk">已完成支付</view>
		</view>
		<view class="success" v-if="num == 3">
			<view class="logo">
				<image src="../../static/user/checkPhone.png" mode=""></image>
			</view>
			<view class="title">购买成功</view>
			<view class="contTxt">在我的持有中查看产品详情</view>
			<view class="bottom_btn">
				<view class="btn_left" @tap="backHome">返回首页</view>
				<view class="btn_right" @tap="backUser">查看我持有的</view>
			</view>
		</view>
		<view class="fail" v-if="num == 4">
			<view class="logo">
				<!-- <image src="../../static/detail/shopfail.png" mode=""></image> -->
			</view>
			<view class="title">支付失败</view>
			<view class="text">请检查网络是否连通</view>
			<view class="bottom_btn">
				<view class="btn_left" @tap="backHome">返回首页</view>
				<view class="btn_right">重新支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 3,
			}
		},
		onLoad(options) {
			
		},
		onShow() {
			
		},
		methods: {
			backHome() {
				uni.switchTab({
					url: "/pages/index/home"
				});
			},
			backUser() {
				uni.redirectTo({
					url: '/pages/user/myGoodsList'
				});
			},
			payOk() {
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.con-box {
		width: 100%;
		position: relative;
		padding: 0 46upx;
		min-height: 100vh;

		.backImg {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			padding: 40upx;

			image {
				width: 26upx;
				height: 45upx;
			}
		}

		.loading,
		.overtime,
		.success,
		.fail {
			width: 100%;
			height: auto;
			padding-top: 160upx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.contTxt{
				font-size: 24upx;
				color: #666;
			}
			.logo {
				width: 176upx;
				height: 176upx;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.title {
				font-size: 40upx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333;
				line-height: 42upx;
				margin: 22upx 0;
			}

			.text {
				font-size: 26upx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 30upx;
				opacity: .4;
			}

			.bottom_btn {
				width: 100%;
				height: 88upx;
				font-size: 30upx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 36upx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 100upx;
			}
		}

		.overtime {
			.bottom_btn {
				height: 80upx;
				background-color: #2c1769;
			}
		}

		.loading {
			.logo {
				padding: 22upx;
			}

			.bottom_btn {
				height: 80upx;
				background-color: #2c1769;
			}
		}

		.fail {
			.logo {
				padding: 22upx;
			}

			.bottom_btn {
				justify-content: space-between;

				&>view {
					width: 48%;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					color: #FFFFFF;
				}

				.btn_left,.btn_right {
					height: 80upx;
					background: linear-gradient(95deg, #FA542E, #D30211);
					border-radius: 40upx;
				}
			}
		}

		.success {

			.logo {
				padding: 22upx;
			}

			.bottom_btn {
				justify-content: space-between;
				padding: 0 40upx;
				font-size: 30upx;
				&>view {
					width: 46%;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					color: #FFFFFF;
				}

				.btn_left,.btn_right{
					height: 78upx;
					background-color: #2c1769;
				}
			}
		}
	}
</style>
